 <!-- DANG NHAP -->
 <link rel="stylesheet" href="public/exts/uploadfile/css/jquery.fileupload-ui.css">
 <script src="public/exts/uploadfile/js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="public/exts/uploadfile/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="public/exts/uploadfile/js/jquery.fileupload.js"></script> 
 <ul class="breadcrumb-arrow">
          	<li><a href="<?php echo HOME; ?>"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="<?php echo url(); ?>">Cập Nhật Thông Tin Cá Nhân</a></li>
 
          </ul>
<?php  $user=cache_get_user($_SESSION['user']['username']); 
	
?>

    <form class="form-horizontal" role="form" method="post" id="avataform" action="<?php echo url(); ?>">
 <div class="form-group">
  	<div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Tên Hiển Thị</label>
            <div class="col-lg-8">
                 <input type="text" class="form-control" name="user_name" id="user_name" value="<?php echo $user['name']; ?> " required />
            </div>
 	 </div>
 <div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Giới Thiệu</label>
            <div class="col-lg-8">
                 <textarea  class="form-control" id="gioithieu"  name="gioithieu" required> <?php echo $user['gioithieu']; ?></textarea>
            </div>

  </div>
   <div class="form-group">
 <label  class="col-lg-4 control-label">Avatar hiện tại</label>
        <div class="col-lg-8" id="current_avatar">
 <img src="<?php echo $user['avatar1']; ?>" />
 </div>
  </div>

  

  

   <div class="form-group" id="avatar_update" style="display:none">
    <label class="col-lg-4 control-label">Avatar mới</label>
    <div class="col-lg-8">
         	  <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-lg-4 control-label">Chọn Avatar</label>
    <div class="col-lg-8">
    	<input type="hidden" name="avatar_link" id="avatar_link" value="<?php echo $user['avatar']; ?> " />
      <input type="file" class="form-control" id="avatar"  name="files[]" multiple> <br/>
           <!-- <div id="progress" class="progress">
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>	 
            <div class="progress-extended">&nbsp;</div>-->
        </div>
    </div>
    
      	<div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Email Liên Hệ</label>
            <div class="col-lg-8">
                 <input type="text" class="form-control" name="user_email" id="user_email" value="<?php echo $user['contact_email']; ?> "  />
            </div>
 	 </div>
     	<div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Yahoo</label>
            <div class="col-lg-8">
                 <input type="text" class="form-control" name="user_yahoo" id="user_yahoo" value="<?php echo $user['contact_yahoo']; ?> "  />
            </div>
 	 </div>
     	<div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Skype</label>
            <div class="col-lg-8">
                 <input type="text" class="form-control" name="user_skype" id="user_skype" value="<?php echo $user['contact_skype']; ?> "  />
            </div>
 	 </div>
     <div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Website</label>
            <div class="col-lg-8">
                 <input type="text" class="form-control" name="user_website" id="user_website" value="<?php echo $user['contact_website']; ?> "  />
            </div>
 	 </div>
     <div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Phone</label>
            <div class="col-lg-8">
                 <input type="text" class="form-control" name="user_phone" id="user_phone" value="<?php echo $user['contact_phone']; ?> "  />
            </div>
 	 </div>
    
  <div class="form-group">
        <div class="col-lg-offset-2 col-lg-10">
         <button type="submit" class="btn btn-success" id="change">LƯU THAY ĐỔI</button> 
        </div>
  </div>


  </div> <!-- End of top form group -->
</form>

   </div> 

  <!-- DOI MAT KHAU -->
  <script>
// Attach a submit handler to the form
$( "#avataform" ).submit(function( event ) {
  // Stop form from submitting normally
  event.preventDefault();
  //var values='module=user&act=avatar&gioithieu='+$('#gioithieu').val()+'&avatar_link='+$('#avatar_link').val()+'&name='+$('#user_name').val();
$.ajax({
  type: "POST",
  url:'<?= HOME ?>index.php?module=user&act=avatar' ,
  data: {gioithieu:$('#gioithieu').val(), avatar_link: $('#avatar_link').val(), name: $('#user_name').val(),user_email:$('#user_email').val(),
  user_yahoo:$('#user_yahoo').val(),user_skype:$('#user_skype').val(),user_website:$('#user_website').val(),user_phone:$('#user_phone').val()},
  success: function(data){
		result = $.parseJSON(data);
if(result.mess){
			popupMessage('Thành công', result ,'alert-success');
		}else if(result.error){
			popupMessage('Thông Báo Lỗi', result ,'alert-danger');
		}

 }

 });


});

</script>
  <script>
   $('#avatar').fileupload({
		maxNumberOfFiles: 1,
      // Uncomment the following to send cross-domain cookies:

        //xhrFields: {withCredentials: true},

      	//url: 'jqueryupload/server/php/index.php',
      	url: '<?= IMAGE_URL ?>avatar/index.php',
      	progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress-bar').css(
                'width',
                progress + '%'
            ).text(progress + '%');
      	},

	   	success: function(data){setImageName(data); $('.progress-bar').remove();},
      	error: function (e, data) {
            alert(error);
        }

     
    });



	$('#avatar').bind('fileuploadadd', function(){
		$('#uploadImage_error').remove();
		});

    

    $('#avatar').fileupload('option', {
        maxFileSize: 50000,
        resizeMaxWidth: 1500,
        resizeMaxHeight: 4000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
    });



    $('#avatar').bind('fileuploaddestroy', function (e, data) {
		resultFileObj = parseQueryString(data.url);
		resultFile = resultFileObj.file;
		$('#avatar').parent().find('input:hidden').each(function(){
			if ($(this).val() == resultFile)  {
		        $(this).remove();
		    }
		});

    });


   function setImageName(data){
		  newData = $.parseJSON(data);
		if(typeof newData.files[0].error != 'undefined'){
			$('#avatar').parent().append('<div id="uploadImage_error" class="alert alert-danger alert-dismissable" style="display: none;"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'+ newData.files[0].error +'</div>');
			$('#uploadImage_error').slideDown('fast');	

		}
 

		$.each(newData, function(e1, value1){
			$.each(value1[0], function(e2, value2){
				if(e2 == 'name'){
				$('#avatar_link').val(value2);
				}
				if(e2 == '100Url'){
					$('#current_avatar').html('<img src="' + value2 + '" />');
				}

			});

		

		});



		$.ajax({
			url : '<?= BASE_URL ?>index.php?module=user&act=ajax&setNewAvatar=1',
			type: 'POST',
			data: {newAvatar : newData.files[0].name },
			success: function(dataAvatar){
			}

		});
	}



</script>

  <script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
           <p class="name">{%=file.name%}</p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <p class="size">{%=o.formatFileSize(file.size)%}</p>
            {% if (!o.files.error) { %}
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
            {% } %}
        </td>
        <td>
            {% if (!o.files.error && !i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
  <script src="public/exts/js/jqueryupload/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="public/exts/js/jqueryupload/blueimp.js"></script>
<!-- blueimp Gallery script -->
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="public/exts/js/jqueryupload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-image.js"></script>
<!-- The File Upload validation plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
